#wrapper{
    position: relative;
}
#wrapper>div{
    position: absolute;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: all 1.5s linear;
}
#wrapper>.p1{
    z-index: 100;
}
.p1>.bc{
    position: absolute;
    width: 100%;
    padding-top: calc(1180rem / 50);
    padding-bottom: calc(74rem / 50);
    background-image: url("../images/p1/bg.png");
    background-size: 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.p1>.bc>.btn{
    position: relative;
    background-image: url("../images/p1/按钮.png");
    width: calc(277rem / 50);
    height: calc(80rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    animation: scale .5s linear alternate infinite;
}
.p1>.bc>.line{
    height: 10px;
    width: 50%;
    position: absolute;
    top: calc(172rem / 50);
    left: calc(80rem / 50);
    transform: translateY(-50%);
    animation: line 1.4s linear alternate infinite;
}
.p1>.bc>.line>.ball{
    position: absolute;
    left: calc(-20rem / 50);
    transform: translateY(-50%);
    background-image: url("../images/p1/ball.png");
    width: calc(70rem / 50);
    height: calc(70rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
    animation: ball 1s linear infinite;
}
@keyframes line {
    0%{
        left: calc(80rem / 50);
    }
    100%{
        left: calc(673rem / 50);
    }
}
@keyframes ball{
    0%{
        transform: translateY(-50%) rotate(0);
    }
    100%{
        transform: translateY(-50%) rotate(360deg);
    }
}
.p1>.bc>.sun{
    position: absolute;
    left: 0;
    top: 0;
    background-image: url("../images/p1/太阳.png");
    width: calc(165rem / 50);
    height: calc(149rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
    animation: scale .5s linear alternate infinite;
}
.p1>.bc>.feather{
    position: absolute;
    top: calc(596rem / 50);
    left: calc(132rem / 50);
    background-image: url("../images/p1/羽毛.png");
    width: calc(126rem / 50);
    height: calc(86rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
    animation: scale .5s linear alternate infinite;
}
.mask{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 109;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
}
.mask>.loadingBar{
    position: relative;
    width: 70%;
    height: calc(30rem / 50);
    background-color: #609887;
    border-radius: calc(15rem / 50);
    overflow: hidden;
}
.mask>.loadingBar>span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: calc(25rem / 50);
    text-align: center;
    line-height: calc(30rem / 50);
    color: #ffffff;
    z-index: 3;
}

.mask>.loadingBar>.loading{
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background-color: #f1990f;
}
#wrapper>.p2{
    opacity: 0;
}
.p2>.bc{
    background-image: url("../images/p2/bg.png");
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    padding: calc(135rem / 50) calc(58rem / 50) calc(26rem / 50);
}
.p2>.bc>.title{
    position: relative;
    width: calc(659rem / 50);
    height: calc(92rem / 50);
    background-image: url("../images/p2/title.png");
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    color: #ffffff;
    font-size: calc(30rem / 50);
}
.p2>.bc>.title>span{
    position: relative;
    top: calc(3rem / 50);
    animation: title .7s linear alternate infinite;
}
.p2>.bc>.title>span:nth-of-type(2){
    animation: title .7s linear .2s alternate infinite;
}
.p2>.bc>.title>span:nth-of-type(3){
    animation: title .7s linear .3s alternate infinite;
}
.p2>.bc>.title>span:nth-of-type(4){
    animation: title .7s linear .5s alternate infinite;
}
.p2>.bc>.title>span:nth-of-type(5){
    animation: title .7s linear .7s alternate infinite;
}
.p2>.bc>.title>span:nth-of-type(6){
    animation: title .7s linear .8s alternate infinite;
}
.p2>.bc>.title>span:nth-of-type(7){
    animation: title .7s linear .9s alternate infinite;
}
@keyframes title {
    0%{
        top: calc(3rem / 50);
    }
    100%{
        top: calc(33rem / 50);
    }
}
.p2>.bc>.intro{
    width: calc(634rem / 50);
    height: calc(1054rem / 50);
    background-image: url("../images/p2/intro.png");
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: calc(26rem / 50);
}
.p2>.bc>.return{
    position: absolute;
    left: calc(58rem / 50);
    top: calc(44rem / 50);
    background-image: url("../images/p2/back.png");
    width: calc(44rem / 50);
    height: calc(44rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
}
.p2>.bc>.test{
    position: absolute;
    left: 50%;
    bottom: calc(74rem / 50);
    transform: translateX(-50%);
    background-image: url("../images/p2/test.png");
    width: calc(277rem / 50);
    height: calc(80rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
    animation: scale2 .5s linear alternate infinite;
}
#wrapper .p3{
    opacity: 0;
}
.p3>.bc{
    background-image: url("../images/p3/bg.png");
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    padding: calc(138rem / 50) calc(58rem / 50) calc(24rem / 50);
}
.p3>.bc>.title{
    position: relative;
    background-image: url("../images/p3/title.png");
    width: calc(659rem / 50);
    height: calc(92rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    color: #ffffff;
    font-size: calc(30rem / 50);
}
.p3>.bc>.title>span{
    position: relative;
    top: calc(3rem / 50);
    animation: title .7s linear alternate infinite;
}
.p3>.bc>.title>span:nth-of-type(2){
    animation: title .7s linear .2s alternate infinite;
}
.p3>.bc>.title>span:nth-of-type(3){
    animation: title .7s linear .3s alternate infinite;
}
.p3>.bc>.title>span:nth-of-type(4){
    animation: title .7s linear .5s alternate infinite;
}
.p3>.bc>.title>span:nth-of-type(5){
    animation: title .7s linear .7s alternate infinite;
}
.p3>.bc>.title>span:nth-of-type(6){
    animation: title .7s linear .8s alternate infinite;
}
.p3>.bc>.selection{
    background-image: url("../images/p3/selection.png");
    width: calc(634rem / 50);
    height: calc(1054rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: calc(26rem / 50);
    padding-top: calc(161rem / 50);
}
.p3>.bc>.selection>.choice{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    /*height: calc(491rem / 50);*/
    width: 100%;
    padding: 0 calc(62rem / 50) 0 calc(40rem / 50);
}
.choice>.option{
    display: flex;
    width: calc(227rem / 50);
    height: calc(60rem / 50);
    margin-top: calc(45rem / 50);
    border-radius: calc(15rem / 50);
    overflow: hidden;
    align-items: center;
    padding-left: calc(10rem / 50);
}
.false{
    background-color: #2b7a50;
}
.true{
    background-image: url("../images/p3/true.png");
    background-size: 100%;
    background-repeat: no-repeat;
}
.choice>.option:nth-of-type(1),
.choice>.option:nth-of-type(2){
    margin-top: 0;
}
.p3 .option_left{
    width: calc(38rem / 50);
    height: calc(38rem / 50);
    background-color: #ffffff;
    color: #2b7a50;
    font-size: calc(24rem / 50);
    text-align: center;
    line-height: calc(38rem / 50);
    border-radius: 50%;
}
.p3 .option_right{
    color: #ffffff;
    font-size: calc(24rem / 50);
    text-align: center;
    flex: 1;
}
.p3>.bc>.return{
    position: absolute;
    left: calc(58rem / 50);
    top: calc(44rem / 50);
    background-image: url("../images/p3/back.png");
    width: calc(44rem / 50);
    height: calc(44rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
}
.p3>.bc>.submit{
    position: absolute;
    left: 50%;
    bottom: calc(74rem / 50);
    transform: translateX(-50%);
    background-image: url("../images/p3/提交.png");
    width: calc(277rem / 50);
    height: calc(80rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
    animation: scale2 .5s linear alternate infinite;
}
#wrapper .p4{
    opacity: 0;
}
.p4>.bc{
    position: absolute;
    width: 100%;
    padding: calc(135rem / 50) calc(58rem / 50) calc(26rem / 50);
    background-image: url("../images/p4/bg.png");
    background-size: 100%;
    background-repeat: no-repeat;
}
.p4>.bc>.title{
    position: relative;
    width: calc(659rem / 50);
    height: calc(92rem / 50);
    background-image: url("../images/p4/title.png");
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    color: #ffffff;
    font-size: calc(30rem / 50);
}
.p4>.bc>.title>span{
    position: relative;
    top: calc(3rem / 50);
    animation: title .7s linear alternate infinite;
}
.p4>.bc>.title>span:nth-of-type(2){
    animation: title .7s linear .2s alternate infinite;
}
.p4>.bc>.title>span:nth-of-type(3){
    animation: title .7s linear .3s alternate infinite;
}
.p4>.bc>.title>span:nth-of-type(4){
    animation: title .7s linear .5s alternate infinite;
}
.p4>.bc>.title>span:nth-of-type(5){
    animation: title .7s linear .7s alternate infinite;
}
.p4>.bc>.title>span:nth-of-type(6){
    animation: title .7s linear .8s alternate infinite;
}
.p4>.bc>.title>span:nth-of-type(7){
    animation: title .7s linear .9s alternate infinite;
}
.p4>.bc>.result{
    width: calc(634rem / 50);
    height: calc(1054rem / 50);
    background-image: url("../images/p4/结果.png");
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: calc(26rem / 50);
    padding-top: calc(520rem / 50);
}
.choice{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    /*height: calc(329rem / 50);*/
    width: 100%;
    padding: 0 calc(60rem / 50) 0 calc(57rem / 50);
}
.p4_option{
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(227rem / 50);
    height: calc(55rem / 50);
    background-color: #eeeeee;
    color: #ff0b0b;
    font-size: calc(24rem / 50);
    font-weight: 600;
    border-radius: calc(15rem / 50);
    margin-top: calc(15rem / 50);
}
.p4 .choice>.p4_option:nth-of-type(1),
.p4 .choice>.p4_option:nth-of-type(2){
    margin-top: 0;
}
.p4 .bc>.return{
    position: absolute;
    left: calc(58rem / 50);
    top: calc(44rem / 50);
    background-image: url("../images/p4/back.png");
    width: calc(44rem / 50);
    height: calc(44rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
}
.p4 .bc>.more{
    position: absolute;
    left: 50%;
    bottom: calc(74rem / 50);
    transform: translateX(-50%);
    background-image: url("../images/p4/more.png");
    width: calc(277rem / 50);
    height: calc(80rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
    animation: scale2 .5s linear alternate infinite;
}
.p4 .Grade{
    position: absolute;
    left: 0;
    top: calc(475rem / 50);
    width: 100%;
    height: calc(200rem / 50);
    text-align: center;
}
.p4 .Grade>.stars{
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}
.stars>div{
    position: absolute;
    left: calc(-34rem / 50);
    width: calc(34rem / 50);
    height: calc(35rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
    margin-right: calc(10rem / 50);
    animation: star 1s  forwards linear;
    animation-play-state: paused !important;
}
.stars>div:nth-of-type(1){
    top: calc(-680rem / 50);
    animation: star1 1s  forwards linear 1.3s;
}
.stars>div:nth-of-type(2){
    top: calc(-720rem / 50);
    animation: star2 1s  forwards linear 1.1s;
}
.stars>div:nth-of-type(3){
    top: calc(-600rem / 50);
    animation: star3 1s  forwards linear .9s;
}
.stars>div:nth-of-type(4){
    top: calc(-690rem / 50);
    animation: star4 1s  forwards linear .7s;
}
.stars>div:nth-of-type(5){
    top: calc(-650rem / 50);
    animation: star5 1s  forwards linear .5s;
}
.p4_stars>div{
    animation-play-state: running !important;
}
@keyframes star1 {
    0%{
        left: calc(-34rem / 50);
        top: calc(-680rem / 50);
    }
    100%{
        left: calc(263rem / 50);
        top: 0;
    }
}
@keyframes star2 {
    0%{
        left: calc(-34rem / 50);
        top: calc(-680rem / 50);
    }
    100%{
        left: calc(311rem / 50);
        top: 0;
    }
}
@keyframes star3 {
    0%{
        left: calc(-34rem / 50);
        top: calc(-600rem / 50);
    }
    100%{
        left: calc(357rem / 50);
        top: 0;
    }
}
@keyframes star4 {
    0%{
        left: calc(-34rem / 50);
        top: calc(-690rem / 50);
    }
    100%{
        left: calc(405rem / 50);
        top: 0;
    }
}
@keyframes star5 {
    0%{
        left: calc(-34rem / 50);
        top: calc(-650rem / 50);
    }
    100%{
        left: calc(453rem / 50);
        top: 0;
    }
}
.full_star{
    background-image: url("../images/p4/星星1.png");
}
.zero_star{
    background-image: url("../images/p4/星星2.png");
}
.stars>.half_star{
    background-image: url("../images/p4/萤火虫半星.png");
    width: calc(40rem / 50);
    height: calc(40rem / 50);
}
.grade{
    margin-top: calc(35rem / 50);
    font-size: calc(48rem / 50);
    color: #ffffff;
}
#wrapper .p5{
    opacity: 0;
}
.p5>.bc{
    position: absolute;
    width: 100%;
    padding-top: calc(284rem / 50);
    padding-bottom: calc(80rem / 50);
    background-image: url("../images/p5/bg.png");
    background-size: 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.p5>.bc>.license{
    width: calc(694rem / 50);
    height: calc(806rem / 50);
    background-image: url("../images/p5/license.png");
    background-size: 100%;
    background-repeat: no-repeat;
    margin-bottom: calc(84rem / 50);
    animation: none;
}
.page5>.bc>.license{
    animation: scale .8s linear alternate 6!important;
}
.p5>.bc>.index{
    background-image: url("../images/p5/index.png");
    width: calc(277rem / 50);
    height: calc(80rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    animation: scale .5s linear alternate infinite;
}
.p5>.bc>.return{
    position: absolute;
    left: calc(58rem / 50);
    top: calc(44rem / 50);
    background-image: url("../images/p5/back.png");
    width: calc(44rem / 50);
    height: calc(44rem / 50);
    background-size: 100%;
    background-repeat: no-repeat;
}

@keyframes scale {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.2);
    }
}
@keyframes scale2 {
    0%{
        transform: translateX(-50%) scale(1);
    }
    100%{
        transform: translateX(-50%) scale(1.2);
    }
}
